<template>
  <el-pagination
    background
    layout="total, sizes, prev, pager, next, jumper"
    @current-change="handleCurrentChage"
    @size-change="handleSizeChange"
    :default-page-size="props.limit"
    :current-page="props.page"
    :page-sizes="[5, 10, 20, 30]"
    :total="listCount"
    class="mt-4" />
</template>

<script setup>
const props = defineProps({
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 10
  },
  listCount: {
    type: Number,
    default: 0
  },
  loadList: {
    type: Function,
    default: () => {}
  }
})

const emit = defineEmits(['update:page', 'update:limit'])

// 处理分页改变
const handleCurrentChage = (page) => {
  emit('update:page', page)
  props.loadList()
}

// 处理每页多少条数据
const handleSizeChange = (limit) => {
  emit('update:limit', limit)
  emit('update:page', 1)
  props.loadList()
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 30px;
  justify-content: center;
}
</style>
